<template>
    <el-row>
        <el-col :span="24">
            <el-card class="weibo" >
            <span class="title">
                <img class="icon" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3779990328,1416553241&fm=179&app=35&f=PNG?w=108&h=108&s=E7951B62A4639D153293A4E90300401B"/>
                微博热搜榜</span>
                <div v-for="(item,index) in weibo" :key="index"  >
                    <span class="index">{{index+1}}.</span>
                    <span>
                    <a :href="item.url">
                    {{item.title}}
                    </a>
                </span>
                    <span class="hotNumber">{{item.hot}}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import * as hot from "../../api/hot";

    export default {
        name: "weiboCard",
        data(){
            return{
                weibo:[]
            }
        },
        async created() {
            let that =this
            await hot.getHotWeiBo().then(function (response) {
                let result = response.data.data
                for(let i=0;i<result.length;i++){
                    that.weibo.push(JSON.parse(result[i]))
                }
            })
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
        color: #222222;
    }
    .weibo{
        position: relative;
        left: 30%;
        width: 55%;
    }
    .title{
        position: relative;
        left: 30%;
        color: #FF6600;
    }
    .icon{
        max-width: 1em;
        max-height: 1em;
    }
    .hotNumber{
        color: red;
    }
    .index{
        color: #f26d5f;
    }
</style>
